<template>
  <q-drawer elevated show-if-above :width="layoutSideWidth"
    class="bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900">
    <el-scrollbar>
      <el-menu :collapse="isCollapse" :collapse-transition="false" :default-active="active" class="border-r-0 w-full"
        unique-opened @select="selectMenuItem">
        <template v-for="item in routerStore.asyncRouters[0].children">
          <aside-component v-if="!item.hidden" :key="item.name" :router-info="item" />
        </template>
      </el-menu>
    </el-scrollbar>
    <div
      class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
      :class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'" @click="toggleCollapse">
      <el-icon v-if="!isCollapse">
        <DArrowLeft />
      </el-icon>
      <el-icon v-else>
        <DArrowRight />
      </el-icon>
    </div>
  </q-drawer>

</template>

<script setup>
import AsideComponent from "@/layouts/aside/asideComponent/index.vue";
import { ref, provide, watchEffect, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRouterStore } from "@/stores/use_router_store";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const appStore = useAppStore();
const { device, config } = storeToRefs(appStore);


const route = useRoute();
const router = useRouter();
const routerStore = useRouterStore();
const isCollapse = ref(false);
const active = ref("");
const layoutSideWidth = computed(() => {
  if (!isCollapse.value) {
    return config.value.layout_side_width;
  } else {
    return config.value.layout_side_collapsed_width;
  }
});
watchEffect(() => {
  active.value = route.meta.activeName || route.name;
});

watchEffect(() => {
  if (device.value === "mobile") {
    isCollapse.value = true;
  } else {
    isCollapse.value = false;
  }
});

provide("isCollapse", isCollapse);

const selectMenuItem = (index, _, ele, aa) => {
  const query = {};
  const params = {};
  routerStore.routeMap[index]?.parameters &&
    routerStore.routeMap[index]?.parameters.forEach((item) => {
      if (item.type === "query") {
        query[item.key] = item.value;
      } else {
        params[item.key] = item.value;
      }
    });
  if (index === route.name) return;
  if (index.indexOf("http://") > -1 || index.indexOf("https://") > -1) {
    window.open(index);
  } else {
    router.push({ name: index, query, params });
  }
};

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};
</script>

<style lang="scss"></style>
